export const verticalExpand = {
  enter(el, {duration}) {
    let height = el.offsetHeight
    el.style.overflow = 'hidden'
    el.style.transition = `all ease ${duration}ms`
    el.style.height = '0px';

    setTimeout(() => {
      el.style.height = `${height}px`
    }, 10)
  },
  afterEnter(el) {
    this.afterLeave(el);
  },

  beforeLeave(el, {duration}) {
    el.style.height = `${el.offsetHeight}px`
    el.style.overflow = 'hidden'
    el.style.transition = `all ease ${duration}ms`
  },
  leave(el, {ctx}) {
    setTimeout(() => {
      el.style.height = '0px';
      el.style.padding = '0px';
    }, 0)
  },
  afterLeave(el) {
    el.style.removeProperty('height')
    el.style.removeProperty('overflow')
    el.style.removeProperty('transition')
    el.style.removeProperty('padding')
  },
}